<!--
    头部导航栏
-->
<template>
  <div class="header-bar">
    <div class="header-bar-top">
      <div class="fold-icon">
        <span v-if="store.state.common.collapsed" class="iconfont icon-zhankai2" @click="unFold"></span>
        <span v-else class="iconfont icon-shouqi" @click="fold"></span>
      </div>
      <div class="bread-crumb">
        <v-bread-crumb :breadCrumbs="breadCrumbs"></v-bread-crumb>
      </div>
    </div>
    <!--  页面缓存组  -->
    <div class="keep-alive-list">
      <template v-for="item in includesRouterTabs" :key="item.path">
        <span
          class="keep-alive-item"
          :class="{ 'route-select': item.path === currentPath }"
          @click="routeSelect(item)"
        >
          <span class="title">{{ item.title }}</span>
          <span
            @click="(e) => { deleteCom(e, item.name) }"
            class="iconfont icon-guanbi-quxiao-guanbi"
          ></span>
        </span>
      </template>
    </div>
    <tool-bar></tool-bar>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import toolBar from 'lib-comp/toolBar/toolBar.vue'
const store = useStore()
const router = useRouter()

const currentName = computed(() => {
  return store.state.common.currentName
})

const currentPath = computed(() => {
  return store.state.common.currentPath
})

const breadCrumbs = computed(() => {
  console.log(store.state.common.breadCrumbs)
  return store.state.common.breadCrumbs
})

const routeSelect = (item) => {
  store.commit('setCommonStore', {
    currentName: item.name,
    currentPath: item.path
  })
  router.push(item.path)
}

const includesRouterTabs = computed(() => {
  return store.state.common.includesRouterTabs
})

// 展开
const unFold = () => {
  store.commit('setCommonStore', {
    collapsed: false
  })
}
// 折叠
const fold = () => {
  store.commit('setCommonStore', {
    collapsed: true
  })
}
// 删除缓存组件
const deleteCom = (e: MouseEvent, name: string) => {
  e.stopPropagation()
  e.preventDefault()
  store.commit('setCommonStore', {
    includesRouterTabs: store.state.common.includesRouterTabs.filter((item: any) => item.name !== name)
  })
}
</script>

<style lang="less" scoped>
.header-bar {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 0 10px;

  .header-bar-top {
    height: 40px;
    line-height: 40px;
    display: flex;
    .fold-icon {
      display: inline-block;
      margin-right: 10px;
    }

    .iconfont {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      color: @theme-bac-color;
    }
  }
}

.bread-crumb {
  height: 40px;
  line-height: 40px;
}

.app-list {
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  width: 300px;

  .app-item {
    display: inline-block;
    height: 40px;
    word-break: keep-all;
    overflow: visible;
    line-height: 40px;
    margin: 0 5px;
    font-size: 14px;
    padding: 0 5px;
    cursor: pointer;
    background: white;
    text-align: center;
  }

  .app-select {
    color: @theme-bac-color;
  }
}

.keep-alive-list {
  display: flex;
  width: calc(100% - 200px);
  height: 40px;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;

  .keep-alive-item {
    position: relative;
    height: 32px;
    line-height: 32px;
    border: 1px solid #f2f2f2;
    padding: 0 10px;
    margin-right: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;

    .title {
      margin-right: 4px;
    }
  }

  .iconfont {
    color: #f2f2f2;
  }

  .route-select {
    color: white;
    background: @theme-bac-color;
  }
}
</style>
